<template>
	<view class="page">
		<view style="height: 28rpx;"></view>
		<block v-if="!emoObj.icon">
			<view class="flex-center" style="flex-direction: column;">
				<view>等待数据</view>
				<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
					<view class="icon-b"></view>
					<view class="icon-b"></view>
					<view class="icon-b"></view>
				</view>
			</view>
			<view style="height: 28rpx;"></view>
			<view v-show="member.phone" class="blocks">
				<view style="padding: 28rpx;font-size: 28rpx;font-weight: 500;">
					<text v-if="member.imei">今天不小心忘记戴手表，对吗？建议长时间正确佩戴手表，让数据测量更准确</text>
					<text v-else>请先绑定设备</text>
				</view>
				<view class="flex-center">
					<view v-if="member.imei"
						style="width: 260rpx;height: 70rpx;background-color: #1d6efa;line-height: 70rpx;text-align: center;border-radius: 40rpx;color: #fff;">
						暂无数据
					</view>
					<view v-else @click="bind"
						style="width: 260rpx;height: 70rpx;background-color: #1d6efa;line-height: 70rpx;text-align: center;border-radius: 40rpx;color: #fff;">
						去绑定手表
					</view>
				</view>
				<view style="height: 28rpx;"></view>
			</view>
		</block>
		<view v-if="member.imei&&emoObj.icon" style="padding: 15rpx 50rpx;" class="flex-SB">
			<view @click="$navigateTo('/pagesA/pages/question/question')"
				style="display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 16px;">
				<view>情绪状态</view>
				<image style="width: 34rpx;height: 34rpx;" src="https://baxztech.com/pilao_admin/question.png"></image>
			</view>
			<view @click="navigatorCheck('/pagesA/pages/list/history')" class="flex-more">
				<view style="font-size: 14px;">查看更多</view>
				<u-icon name="arrow-right" color="#01D6D6"></u-icon>
			</view>
		</view>
		<view style="height: 28rpx;"></view>


		<!-- 心情指数 -->
		<view class="blocks">
			<view class="index-item">
				<block v-if="member.imei&&emoObj.icon">
					<view @click="$navigateTo('/pages/index/detial?feedType=1&type=emotion&time='+date_time)">
						<view class="index-header" style="background-color: #fff;">
							<view class=""
								style="background-color: #fff;justify-content: start;align-items: center;display: flex;">
								<image class="iconImg" src="@/static/images/emoIcon.png"></image>
								<view class="index-title">心情指数</view>
							</view>
							<view class="check-details">
								<view class="details-text">
									<!-- <text>查看详情</text> -->
									<u-icon name="arrow-right" color="#a6a6a6;"></u-icon>
								</view>
							</view>
						</view>

						<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
							<view class="flex-SB">
								<view><text :style="{color:emoObj.color}"
										style="font-size: 48rpx;font-weight: bold;color: #20403E;">{{lastEmotion.emotion_index}}</text><text
										style="font-size: 24rpx;font-weight: 500;color: #20403e;margin-left: 20rpx;">心情{{emo_short}}</text>
								</view>
								<view>
									<view style="width: 242rpx;height: 20rpx;position: relative;">
										<view
											:style="{borderTopColor:emoObj.color,left:lastEmotion.emotion_index-6+'%'}"
											class="point-dot"></view>
									</view>
									<view style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;">
										<view class="point-bar" style="background-color: #ff4d31;"></view>
										<view class="point-bar" style="width: 58rpx;background-color: #fdc956;"></view>
										<view class="point-bar" style="width: 54rpx;background-color: #14b3f8;"></view>
									</view>
									<view
										style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;font-size: 20rpx;color: #aaa;">
										<view class="point-bar" style="margin: 0 2rpx;">0</view>
										<view class="point-bar" style="margin-left: 65rpx;">50</view>
										<view class="point-bar" style="margin-left: 35rpx;">70</view>
										<view class="point-bar" style="margin-left: 24rpx;">100</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 					<view class="flex-more" style="justify-content: flex-start;margin-left: 30rpx;">
							<image style="width: 34rpx;height: 34rpx;" src="@/static/images/question.png"></image>
							<view>持平</view>
						</view> -->
					</view>
				</block>
				<block v-else>
					<view class="index-header"
						style="background-color: #fff;justify-content: start;align-items: center;">
						<image class="iconImg" src="@/static/images/emoIcon.png"></image>
						<view class="index-title">心情指数</view>
					</view>
					<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
						<view class="flex-SB">
							<view>--</view>
							<view style="width: 200rpx;height: 12rpx;background-color: #ccc;border-radius: 6rpx;">
							</view>
						</view>
					</view>
					<view class="flex-more" style="justify-content: flex-start;margin-left: 20rpx;">
						<image style="width: 34rpx;height: 34rpx;" src="@/static/images/question.png"></image>
						<view>未知</view>
					</view>
					<view style="height: 28rpx;"></view>
				</block>
			</view>
		</view>

		<view style="height: 28rpx;"></view>

		<!-- 压力指数 -->
		<view class="blocks">
			<view class="index-item">
				<block v-if="member.imei&&emoObj.icon" style="padding: 15rpx 30rpx;" class="flex-SB">
					<view @click="$navigateTo('/pages/index/detial?feedType=2&type=stress&time='+date_time)">
						<view class="index-header" style="background-color: #fff;">
							<view class=""
								style="background-color: #fff;justify-content: start;align-items: center;display: flex;">
								<image class="iconImg" src="@/static/images/strIcon.png"></image>
								<view class="index-title">压力指数</view>
							</view>
							<view class="check-details">
								<view class="details-text">
									<!-- <text>查看详情</text> -->
									<u-icon name="arrow-right" color="#a6a6a6;"></u-icon>
								</view>
							</view>
						</view>

						<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
							<view class="flex-SB">

								<view><text :style="{color:strObj.color}"
										style="font-size: 48rpx;font-weight: bold;color: #20403E;">{{lastEmotion.stress_index}}</text><text
										style="font-size: 24rpx;font-weight: 500;color: #20403e;margin-left: 20rpx;">{{str_short}}</text>
								</view>
								<view>
									<view style="width: 242rpx;height: 20rpx;position: relative;">
										<view :style="{borderTopColor:strObj.color,left:lastEmotion.stress_index-6+'%'}"
											class="point-dot"></view>
									</view>
									<view style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;">
										<view class="point-bar" style="background-color: #14b3f8;"></view>
										<view class="point-bar" style="width: 58rpx;background-color: #fdc956;"></view>
										<view class="point-bar" style="width: 54rpx;background-color: #ff4d31;"></view>
									</view>
									<view
										style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;font-size: 20rpx;color: #aaa;">
										<view class="point-bar" style="margin: 0 2rpx;">0</view>
										<view class="point-bar" style="margin-left: 65rpx;">50</view>
										<view class="point-bar" style="margin-left: 35rpx;">70</view>
										<view class="point-bar" style="margin-left: 24rpx;">100</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="index-header"
						style="background-color: #fff;justify-content: start;align-items: center;">
						<image class="iconImg" src="@/static/images/strIcon.png"></image>
						<view class="index-title">压力指数</view>
					</view>
					<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
						<view class="flex-SB">
							<view>--</view>
							<view style="width: 200rpx;height: 12rpx;background-color: #ccc;border-radius: 6rpx;">
							</view>
						</view>
					</view>
					<view class="flex-more" style="justify-content: flex-start;margin-left: 20rpx;">
						<image style="width: 34rpx;height: 34rpx;" src="@/static/images/question.png"></image>
						<view>未知</view>
					</view>
					<view style="height: 28rpx;"></view>
				</block>

			</view>
		</view>
		<view style="height: 28rpx;"></view>
		<!-- 精力指数 -->
		<view class="blocks">
			<view class="index-item">
				<block v-if="member.imei&&emoObj.icon" style="padding: 15rpx 30rpx;" class="flex-SB">
					<view @click="$navigateTo('/pages/index/detial?feedType=3&type=tired&time='+date_time)">
						<view class="index-header" style="background-color: #fff;">
							<view class=""
								style="background-color: #fff;justify-content: start;align-items: center;display: flex;">
								<image class="iconImg" src="@/static/images/tirIcon.png"></image>
								<view class="index-title">精力指数</view>
							</view>
							<view class="check-details">
								<view class="details-text">
									<u-icon name="arrow-right" color="#a6a6a6;"></u-icon>
								</view>
							</view>
						</view>

						<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
							<view class="flex-SB">
								<view><text :style="{color:tirObj.color}"
										style="font-size: 48rpx;font-weight: bold;color: #20403E;">{{lastEmotion.tired_index}}</text><text
										style="font-size: 24rpx;font-weight: 500;color: #20403e;margin-left: 20rpx;">{{tir_short}}</text>
								</view>
								<view>
									<view style="width: 242rpx;height: 20rpx;position: relative;">
										<view :style="{borderTopColor:tirObj.color,left:lastEmotion.tired_index-6+'%'}"
											class="point-dot"></view>
									</view>
									<view style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;">
										<view class="point-bar" style="background-color: #ff4d31;"></view>
										<view class="point-bar" style="width: 58rpx;background-color: #fdc956;"></view>
										<view class="point-bar" style="width: 54rpx;background-color: #14b3f8;"></view>
									</view>
									<view
										style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;font-size: 20rpx;color: #aaa;">
										<view class="point-bar" style="margin: 0 2rpx;">0</view>
										<view class="point-bar" style="margin-left: 65rpx;">50</view>
										<view class="point-bar" style="margin-left: 35rpx;">70</view>
										<view class="point-bar" style="margin-left: 24rpx;">100</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="index-header"
						style="background-color: #fff;justify-content: start;align-items: center;">
						<image class="iconImg" src="@/static/images/tirIcon.png"></image>
						<view class="index-title">精力指数</view>
					</view>
					<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
						<view class="flex-SB">
							<view>--</view>
							<view style="width: 200rpx;height: 12rpx;background-color: #ccc;border-radius: 6rpx;">
							</view>
						</view>
					</view>
					<view class="flex-more" style="justify-content: flex-start;margin-left: 20rpx;">
						<image style="width: 34rpx;height: 34rpx;" src="@/static/images/question.png"></image>
						<view>未知</view>
					</view>
					<view style="height: 28rpx;"></view>
				</block>

			</view>
		</view>
		<view style="height: 20rpx;"></view>
		<!-- 抑郁指数 -->
		<view class="blocks">
			<view class="index-item">
				<block v-if="member.imei&&yiyuData&&showyyBlock" style="padding: 15rpx 30rpx;" class="flex-SB">
					<view>
						<view class="index-header" style="background-color: #fff;">
							<view class=""
								style="background-color: #fff;justify-content: start;align-items: center;display: flex;">
								<image class="iconImg" src="@/static/images/yiyu.png"></image>
								<view class="index-title">抑郁指数</view>
							</view>
							<view class="check-details">
								<view class="details-text">
								</view>
							</view>
						</view>

						<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
							<view class="flex-SB">
								<view><text :style="{color:yiyuObj.color}"
										style="font-size: 48rpx;font-weight: bold;color: #20403E;">{{yiyuVla||"识别中"}}</text><text
										style="font-size: 24rpx;font-weight: 500;color: #20403e;margin-left: 20rpx;">{{yiyuObj.title}}</text>
								</view>
								<view>
									<view style="width: 242rpx;height: 20rpx;position: relative;">
										<view :style="{borderTopColor:yiyuObj.color,left:yiyuVla-6+'%'}"
											class="point-dot"></view>
									</view>
									<view style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;">
										<view class="point-bar" style="background-color: #14b3f8;"></view>
										<view class="point-bar" style="width: 58rpx;background-color: #fdc956;"></view>
										<view class="point-bar" style="width: 54rpx;background-color: #ff4d31;"></view>
									</view>
									<view
										style="width: 242rpx;height: 14rpx;border-radius: 6rpx;display: flex;font-size: 20rpx;color: #aaa;">
										<view class="point-bar" style="margin: 0 2rpx;">0</view>
										<view class="point-bar" style="margin-left: 65rpx;">50</view>
										<view class="point-bar" style="margin-left: 35rpx;">70</view>
										<view class="point-bar" style="margin-left: 24rpx;">100</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="showyyBlock">
					<view class="index-header"
						style="background-color: #fff;justify-content: start;align-items: center;">
						<image class="iconImg" src="@/static/images/yiyu.png"></image>
						<view class="index-title">抑郁指数</view>
					</view>
					<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
						<view class="flex-center" style="flex-direction: column;">
							<view style="border-radius: 6rpx;font-size: 20rpx;">
								请佩戴好手表，等待手表自动采集足够数据后会展示今日抑郁状态。
							</view>
							<view style="height: 20rpx;"></view>
							<view
								style="width: 180rpx;height: 44rpx;border-radius: 48rpx;background: linear-gradient(#1d6efa, #1d6efa), #1d6efa;color: #fff;text-align: center;font-size: 20rpx;line-height: 44rpx;"
								@click="showyyBlock = false">了解了</view>
						</view>
					</view>
					<view style="height: 28rpx;"></view>
				</block>
				<block v-else>
					<view class="index-header"
						style="background-color: #fff;justify-content: start;align-items: center;">
						<image class="iconImg" src="@/static/images/yiyu.png"></image>
						<view class="index-title">抑郁指数</view>
					</view>
					<view class="index-content " style="background-color: #fff;padding: 0 30rpx 30rpx;">
						<view class="flex-SB">
							<view>--</view>
							<view style="width: 200rpx;height: 12rpx;background-color: #ccc;border-radius: 6rpx;">
							</view>
						</view>
					</view>
					<view class="flex-more" style="justify-content: flex-start;margin-left: 20rpx;">
						<image style="width: 34rpx;height: 34rpx;" src="@/static/images/question.png"></image>
						<view>未知</view>
					</view>
					<view style="height: 28rpx;"></view>
				</block>

			</view>
		</view>
		<view style="height: 20rpx;"></view>
		<view class="blocks">
			<block v-if="member.phone&&member.imei">
				<view class="index-header">
					<view class="index-title">情绪分析</view>
					<view class="check-details">
						<view class="details-text" style="font-size: 20rpx;color: #aaa;" @tap="showDetial">
							<text>{{formatMinutes}}</text>
							<u-icon name="arrow-right" :size="12" color="#a6a6a6"></u-icon>
						</view>
					</view>
				</view>
				<view class="flex-SB">
					<view style="width: 310rpx;padding-left: 10rpx;">
						<view v-for="(item,index) in pieData" :key="index"
							style="border-radius: 10px;margin: 0 auto;font-size: 24rpx;">
							<view class="CF-blocks" style="font-size: 24rpx;">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<view class="CF-dots" :style="{borderColor:item.color}"></view>
									<view>{{item.name}}</view>
								</view>
								<view style="margin-left: 20rpx;">
									{{item.per}}%
								</view>
							</view>
							<view class="CF-texts">
								{{item.str}}
							</view>
						</view>
					</view>
					<view style="width: 160px;height: 160px;"><l-echart style="width: 160px;height: 160px;"
							ref="emotionChart"></l-echart></view>
				</view>

			</block>

			<block v-else-if="!member.phone">
				<view style="height: 28rpx;"></view>
				<view class="blocks">
					<view style="padding: 28rpx;font-size: 28rpx;font-weight: 500;">
						还没有数据，登录并绑定设备进行识别吧~
					</view>
					<view class="flex-center">
						<view @click="login"
							style="width: 260rpx;height: 70rpx;background-color: #1d6efa;line-height: 70rpx;text-align: center;border-radius: 40rpx;color: #fff;">
							去登录
						</view>
					</view>
					<view style="height: 28rpx;"></view>
				</view>
			</block>
		</view>
		<view style="height: 20rpx;"></view>
		<u-popup round="15" :show="popupShow" mode="center" :closeable="true" @close="popupShow = false">
			<view class="block" style="padding: 0;">
				<view style="height: 20rpx;"></view>
				<view style="font-size: 20px;color: rgb(51, 51, 51);font-weight: 500;text-align: center;">情绪成分详情</view>
				<view
					style="font-size: 14px;line-height: 14px;color: rgb(51, 51, 51);text-align: center;margin-top: 10px;">
					{{formatMinutes}}
				</view>
				<view style="width: 686rpx;height: 200px;"><l-echart style="width: 686rpx;height: 200px;"
						ref="emotionChartDetail"></l-echart></view>

				<view v-for="(item,index) in pieData" :key="index"
					style="background: #F7F9F9;border-radius: 10px;width: 92%;margin: 0 auto 10px;">
					<view class="CF-block">
						<view style="display: flex;flex-direction: row;align-items: center;">	
							<view class="CF-dot" :style="{background:item.color}"></view>
							<view>{{item.name}}</view>
						</view>
						<view>
							{{item.per}}%
						</view>
					</view>
					<view class="CF-text">
						{{item.str}}
					</view>
				</view>
			</view> 
		</u-popup>
		<PrivacyPop :showPrivacy="showPrivacy" @close="close" />
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';  
	import PrivacyPop from '@/uni_modules/privacy.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			LEchart,
			PrivacyPop
		},
		computed: {
			...mapState(['member']),
			formatMinutes() {
				if (!this.lastEmotion.time_str) return "暂无数据";
				let date = new Date(this.lastEmotion.time_str * 1000)
				let start = new Date((this.lastEmotion.time_str - 1800) * 1000)
				let year = date.getFullYear()
				let month = date.getMonth() + 1;
				let day = date.getDate()
				let hour = date.getHours()
				let minutes = date.getMinutes()
				let starthour = start.getHours()
				let startminutes = start.getMinutes()
				if (month < 10) {
					month = '0' + month
				}
				if (day < 10) {
					day = '0' + day
				}
				if (hour < 10) {
					hour = '0' + hour
				}
				if (minutes < 10) {
					minutes = '0' + minutes
				}
				if (starthour < 10) {
					starthour = '0' + starthour
				}
				if (startminutes < 10) {
					startminutes = '0' + startminutes
				}
				return year + "-" + month + "-" + day + " " + starthour + ":" + startminutes + "~" + hour + ":" + minutes
			}
		},
		data() {
			return {
				showFeed:false,
				showPrivacy: false,
				showyyBlock: true,
				yiyuData: null,
				yiyuVla: 0,
				ndata: '',
				showLS: false,
				lsRight: -30,
				Pshow: false,
				Xshow: false,
				timeStr: '',
				welcome: false,
				guide: 1,
				popupShow: false,
				show: false,
				color: {},
				tiredColor: {},
				stressColor: {},
				lastEmotion: {},
				loading: false,
				icon: '',
				tiredIcn: '',
				stressIcn: '',
				emoObj: {
					title: "",
					icon: "",  
					color: "#ccc"
				},
				yiyuObj: {
					title: "",
					icon: "",
					color: "#ccc"
				},
				emo_short: "",
				str_short: "",
				tir_short: "",
				textLS: {},
				tirObj: {
					color: "#ccc"
				},
				strObj: {
					color: "#ccc"
				},
				pieData: [],
				pageIsLoad: false,
				date_time:0
			};
		},
		async onLoad() {
			// uni.setStorageSync('phone','17322375593');
			// uni.setStorageSync('phone','18876003998');
			// uni.setStorageSync('phone','13714020564');
			
			// #ifdef MP-WEIXIN
			if (wx.getPrivacySetting) {
				wx.getPrivacySetting({
					success: (res) => {
						if (res.needAuthorization) {
							this.showPrivacy = true
						}
					},
					fail: () => {},
					complete: () => {}
				})
			}
			// #endif
			
			let phone = uni.getStorageSync('phone') || '';
			if (!phone) return;
			let res = await uni.$u.http.post('/client/user_info', {
				phone
			});
			if (res.status == 200) {
				this.$store.commit('SET_MEMBER', res.data.userinfo)
				uni.setStorageSync('MEMBER', res.data.userinfo)
			}
			await this.initData();
			// console.log(this.member);
		},
		onShow() {
			let ut = uni.getStorageSync('updateTime')||0;
			let nt = new Date().getTime();
			if(ut>0 && (nt-ut)>240000){
				this.initData();
			}
		},
		onReady() {
			let welcome = uni.getStorageSync('welcome')
			if (!welcome) {
				this.welcome = true;
				uni.setStorageSync('welcome', 1)
			}
		},
		methods: {
			close() {
				this.showPrivacy = false
			},
			navigatorCheck(url) {
				if (this.member.phone) {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/pages/login/login'
					})
				}
			},
			todatemo() {
				if (!this.emo_short) {
					return false;
				}
				let t = new Date(new Date().toLocaleDateString()).getTime()
				uni.navigateTo({
					url: "/pagesA/pages/dataemotion/detials?id=",
					success: (res) => {
						res.eventChannel.emit('datas', {
							t
						})
					}
				})
				this.Xshow = false;
			},
			login() {
				uni.navigateTo({
					url: '/pagesA/pages/login/login'
				})
			},
			bind() {
				uni.navigateTo({
					url: '/pagesA/pages/equipment/bind'
				})
			},
			async initData() {
				this.pageIsLoad = false;
				uni.$u.http.post('/client/minutes_identify', {
					imei: this.member.imei,
					phone: "",
					dataType: 'AVG'
				}).then(res => {
					if (res.status == 200) {
						uni.setStorageSync('updateTime', new Date().getTime());
						if (res.data.length < 1 && !res.lastEmotion) {
							this.loading = true
							return this.$toast('情绪识别中');
						}
						this.loading = false
						let emo = res.lastEmotion;
						this.date_time = emo.date_time
						emo.tired_index = 100 - emo.tired_index;
						if (res.yiyu.length) {
							this.yiyuData = res.yiyu[0];
							this.yiyuVla = (parseFloat(this.yiyuData.prob) * 100).toFixed(2)
							this.yiyuObj = this.getEmoObj(Math.round(this.yiyuVla), 'yiyu')
						}
						this.lastEmotion = emo;
						this.$store.state.emotionInfo.index = emo.emotion_index;
						this.$store.state.stressInfo.index = emo.stress_index;
						this.$store.state.tiredInfo.index = emo.tired_index;
						this.emoObj = this.getEmoObj(emo.emotion_index, 'emotion');
						this.strObj = this.getEmoObj(emo.stress_index, 'stress');
						this.tirObj = this.getEmoObj(emo.tired_index, 'tired');
						if (getApp().globalData.emotionType != this.emoObj.title || getApp().globalData
							.stressType != this.strObj.title || getApp().globalData.tiredType != this.tirObj.title
						) {
							this.getSuggtion(emo)
						}
						let pieData = [];
						for (let i in res.chartData) {
							let value = parseFloat(res.chartData[i].value / res.total * 100).toFixed(1)
							pieData.push({
								name: res.chartData[i].affect,
								values: res.chartData[i].value,
								color: res.chartData[i].color,
								value: value,
								str: res.chartData[i].str,
								itemStyle: {
									color: res.chartData[i].color
								},
								per: parseFloat(res.chartData[i].value / res.total * 100).toFixed(1)
							})
						}
						pieData = pieData.sort(sortVla)
						if (pieData.length > 4) {
							this.pieData = pieData.slice(0, 4)
						} else {
							this.pieData = pieData;
						}
						this.initEmotion(this.pieData);
					}
					this.$nextTick(() => {
						this.pageIsLoad = true;
					})
				})
			},
			showDetial() {
				this.popupShow = true;
				this.initEmotionDetail(this.pieData);
			},
			step(num) {
				this.guide = num
				if (num == 3) {
					this.show = false;
					uni.setStorageSync('guide', 3)
				}
			},
			closeWelcome() {
				uni.setStorageSync('welcome', 1)
				this.welcome = false;
			},
			getEmoObj(index, type) {
				//1 心情 2 压力 3 疲劳
				if (index <= 49) {
					if (type == 'emotion') {
						return {
							icon: '/static/images/home/emotion3.png',
							color: '#FF0036',
							title: '心情一般'
						}
					}
					if (type == 'stress') {
						return {
							icon: '/static/images/home/stress1.png',
							color: '#55CF04',
							title: '较为松弛'
						}
					}
					if (type == 'tired') {
						return {
							icon: '/static/images/home/tired3.png',
							color: '#FF0036',
							title: '略有疲惫',
						}
					}
					if (type == 'yiyu') {
						return {
							icon: '/static/images/home/stress1.png',
							color: '#55CF04',
							title: '%抑郁概率'
						}
					}
				} else if (index >= 50 && index <= 69) {
					if (type == 'emotion') {
						return {
							icon: '/static/images/home/emotion2.png',
							color: '#01D6D6',
							title: '心情平和'
						}
					}
					if (type == 'stress') {
						return {
							icon: '/static/images/home/stress2.png',
							color: '#01D6D6',
							title: '稍有压力'
						}
					}
					if (type == 'tired') {
						return {
							icon: '/static/images/home/tired2.png',
							color: '#01D6D6',
							title: '精力适中'
						}
					}
					if (type == 'yiyu') {
						return {
							icon: '/static/images/home/stress2.png',
							color: '#01D6D6',
							title: '%抑郁概率'
						}
					}
				} else if (index >= 70) {
					if (type == 'emotion') {
						return {
							icon: '/static/images/home/emotion1.png',
							color: '#55CF04',
							title: '比较愉悦'
						}
					}
					if (type == 'stress') {
						return {
							icon: '/static/images/home/stress3.png',
							color: '#FF0036',
							title: '有压力',
						}
					}
					if (type == 'tired') {
						return {
							icon: '/static/images/home/tired1.png',
							color: '#55CF04',
							title: '精力充沛'
						}
					}
					if (type == 'yiyu') {
						return {
							icon: '/static/images/home/stress3.png',
							color: '#FF0036',
							title: '%抑郁概率'
						}
					}
				}
			},
			getSuggtion(emo) {
				uni.$u.http.post('/client/getEmotionDes', emo).then(res => {
					if (res.status == 200) {
						const {
							emotion,
							tired,
							stress
						} = res.data;
						if (getApp().globalData.emotionType != this.emoObj.title) {
							this.$store.state.emotionInfo.short = emotion.title;
							this.emo_short = this.$store.state.emotionInfo.short;
							this.$store.state.emotionInfo.long = emotion.contents;
						}
						if (getApp().globalData.stressType != this.strObj.title) {
							this.$store.state.stressInfo.short = stress.title;
							this.str_short = this.$store.state.stressInfo.short;
							this.$store.state.stressInfo.long = stress.contents;
						}
						if (getApp().globalData.tiredType != this.tirObj.title) {
							this.$store.state.tiredInfo.short = tired.title;
							this.tir_short = this.$store.state.tiredInfo.short;
							this.$store.state.tiredInfo.long = tired.contents;
						}
						getApp().globalData.emotionType = this.emoObj.title;
						getApp().globalData.stressType = this.strObj.title;
						getApp().globalData.tiredType = this.tirObj.title;
					}
				})
			},
			initEmotionDetail(data) {
				let option = {
					tooltip: {
						trigger: 'item',
						formatter: '{b} 占比 {c}%'
					},
					legend: {
						show: false,
						orient: 'vertical',
						left: 'right',
						formatter: '{name}{d}',
					},
					series: [{
						type: 'pie',
						radius: ['30%', '70%'],
						label: {
							formatter: '{b} {c}%',
							backgroundColor: 'rgba(0,0,0,0.6)',
							color: '#FFFFFF',
							padding: 5,
							borderRadius: 5
						},
						labelLine: {
							length: 4,
						},
						data: data.sort(sortVla),
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				this.$nextTick(() => {
					this.$refs.emotionChartDetail.init(echarts, chart => {
						chart.setOption(option);
					});
				})

			},
			initEmotion(data) {
				let option = {
					tooltip: {
						trigger: 'item',
						formatter: '{b} 占比 {c}%'
					},
					legend: {
						show: false,
						icon: 'circle',
						selectedMode: false,
						orient: 'vertical',
						// left: '5%',
						top: 'middle',
						borderRadius: 0,
						itemStyle: {
							borderRadius: 0,
							borderCap: 'round'
						},
						formatter: (name) => {
							for (let i in data) {
								if (data[i].name == name) {
									return name + '    ' + data[i].per + '%'
								}
							}
						}
					},
					series: [{
						type: 'pie',
						radius: ['50%', '80%'],
						// right: '-50%',
						data: data,
						label: {
							show: true,
							position: "inside",
							formatter: '{d}%'
						},
						labelLine: {
							show: false,
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				this.$nextTick(() => {
					this.$refs.emotionChart.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
		}
	};

	function randomRange(min, max) {
		return Math.floor(Math.random() * (max - min)) + min;
	}

	function sortVla(a, b) {
		if (a.values < b.values) {
			return 1;
		} else if (a.values > b.values) {
			return -1;
		} else if (a.values == b.values) {
			return 0;
		}
	}
</script>

<style lang="scss" scoped>
	// .blocks{
	// 	border-radius: 50rpx;
	// }
	.blocksfeed{
		background-color: #fff;
		margin: 0 auto;
		border-radius: 20rpx;
		box-shadow: 4rpx 8rpx 16rpx #a4aede2e;
		margin-top: 30rpx;padding-bottom: 20rpx;
		width: 686rpx;
	}
	.index-item {
		border-radius: 10px;
		background-color: #FBFCFC;
	}
	.refaceimg{
		width: 80rpx;
		height: 80rpx;
	}
	.rebox{
		margin-left: 60rpx;
		text-align: center;
		font-size: 20rpx;
	}
	.index-header {
		border-radius: 10px 10px 0px 0px;
		height: 48px;
		display: flex;
		justify-content: space-between;
		padding: 0px 12px;
	}

	.index-title {
		height: 48px;
		line-height: 48px;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.check-details {
		height: 16px;
		margin-top: 16px;
	}

	.details-text {
		height: 16px;
		line-height: 16px;
		font-size: 14px;
		color: #333;
		margin-right: 2px;
	}

	.check-details image {
		display: block;
		height: 16px;
		width: 32rpx;
		height: 32rpx;
	}

	.index-content {
		background-color: #fff;
		border-radius: 0px 0px 10px 10px;
	}

	.iconImg {
		width: 48rpx;
		height: 50rpx;
	}

	.show-index {
		height: 32px;
		display: flex;
		justify-content: center;
		padding-top: 16px;
		padding-bottom: 12px;
	}

	.index-icn {
		height: 32px;
	}

	.index-num {
		height: 32px;
		line-height: 32px;
		font-size: 32px;
		font-weight: 900;
		margin-left: 10px;
	}

	.index-text {
		height: 14px;
		line-height: 14px;
		font-size: 14px;
		font-weight: 500;
		text-align: center;
		padding-bottom: 20px;
		display: block;
		width: 686rpx;
	}

	.CF-blocks {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 0 0 15rpx;
		justify-items: center;
		font-family: 500;
		color: #333333;
	}

	.CF-block {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 15px 10px;
		justify-items: center;
		font-size: 14px;
		font-family: 500;
		color: #333333;
	}

	.CF-text {
		padding: 0 15px 10px;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		letter-spacing: 0;
		color: #666666;
	}

	.CF-texts {
		padding: 0 20rpx 10rpx;
		font-size: 18rpx;
		font-weight: 400;
		line-height: 32rpx;
		letter-spacing: 0;
		color: #AAAAAA;
	}

	.CF-dots {
		margin-right: 10rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		color: #666666;
		border: 4rpx solid #fff;
		background: #ffffff;
		font-family: PingFangSC-Regular;
	}

	.CF-dot {
		margin-right: 10rpx;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background-color: #61E2E2;
		color: #666666;
		font-family: PingFangSC-Regular;
	}

	.icon-b {
		width: 28rpx;
		height: 18rpx;
		margin: 0 10rpx;
		border-radius: 9rpx;
	}

	.icon-b:nth-child(1) {
		background-color: #ff4121;
	}

	.icon-b:nth-child(2) {
		background-color: #fdc74f;
	}

	.icon-b:nth-child(3) {
		background-color: #0cb0f7;
	}

	.flex-more,
	.details-text {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.point-dot {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 15rpx solid #ff4d31;
		position: absolute;
	}

	.point-bar {
		width: 114rpx;
		height: 14rpx;
		border-radius: 7rpx;
		margin: 0 2rpx;
	}

	.point-num {
		width: 26rpx;
		height: 14rpx;
		border-radius: 7rpx;
	}
</style>